<template>
  <div v-loading="loading" class="list-table">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm" style="left: 20px;right:5px;">
      <div class="area-header">
        <span class="area-header-title">
          {{ $t('科目匹配') }}
          <el-tooltip placement="top">
            <div slot="content">
              <span v-html="$t('1. 此页面科目匹配页面；<br>')" />
              <span v-html="$t('2. 导入财务数据时，系统自动和原财务模板匹配，有未匹配的科目时，将跳转到此页面中；<br>')" />
              <span v-html="$t('3. “科目匹配”列中，可选择需匹配的科目名称。不选择匹配的科目，导入的科目将会作为新的科目；<br>')" />
              <span v-html="$t('4. 确认信息无误后，点击【保存】按钮，完成此次财务数据导入。<br>')" />
            </div>
            <i class="el-icon-question" />
          </el-tooltip>
        </span>
      </div>
      <el-table :data="form.matchs" border class="formTable tree_el_Table">
        <el-table-column :label="$t('类型')" align="center" prop="holderName" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.belongsTable === 'balance_sheet'">{{ $t('资产负债表') }}</span>
            <span v-if="scope.row.belongsTable === 'cash_flow_sheet'">{{ $t('现金流量表') }}</span>
            <span v-if="scope.row.belongsTable === 'income_sheet'">{{ $t('利润表') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('导入科目名称')" align="center" prop="keyNameThis" width="300">
          <template slot-scope="scope">
            <el-input v-model="scope.row.keyNameThis" :placeholder="$t('科目名称')" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('科目匹配')" align="center" prop="resourceId" width="350">
          <template slot-scope="scope">
            <treeselect
              v-model="scope.row.resourceId"
              :options="sysKeyOptions"
              :disable-branch-nodes="true"
              :placeholder="$t('监控科目/指标')"
            >
              <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
                {{ $t(node.label) }}
                <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
              </label>
              <label slot="value-label" slot-scope="{ node }">
                {{ $t(node.label) }}
              </label>
            </treeselect>
          </template>
        </el-table-column>
        <el-table-column :label="$t('导入科目值')" align="center" prop="keyValue" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.keyValue" type="num" :placeholder="$t('导入科目值')" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('排序')" align="center" prop="sort">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" type="num" :placeholder="$t('排序')" />
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button v-hasPermi="['company:pcw:edit']" type="primary" @click="submitForm">{{ $t("保存") }}</el-button>
    </div>
  </div>
</template>

<script>
    import { savePcwDetailsMatch } from '@/api/company/pcw/pcwDetailsMatch'
    // import PcwKeySelect from '@/components/PcwKeySelect'
    import { matchSubjectTree } from '@/api/company/pcw/pcwTempSubject'
    import Treeselect from '@riophae/vue-treeselect'

    export default {
      components: { Treeselect },
      props: {
        companyId: {
          type: String,
          required: true
        }
      },
        data() {
            return {
                // 表单参数
                form: { matchs: [] },
                loading: false,
                // 表单校验
                rules: {
                  resourceId: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                  keyNameThis: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                  keyValue: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                  keyCode: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
                },
                // 查询参数
                queryParams: {
                  tableName: ''
                },
                // 查询科目下拉框参数
                querySubject: {
                  companyId: this.companyId
                },
                // 科目类型
                sysKeyOptions: [
                  { id: 'balance_sheet', label: '资产负债表', children: [] },
                  { id: 'income_sheet', label: '利润表', children: [] },
                  { id: 'cash_flow_sheet', label: '现金流量表', children: [] }
                ]
            }
        },
        created() {
          // 根据选择的tableName,获取下面的默认指标
          matchSubjectTree(this.querySubject).then(response => {
            const item = response.rows
            this.diGuiTree(item)
            this.sysKeyOptions = item
          })
        },
        methods: {
          // 初始化数据
          init(rows) {
            this.form.matchs = rows
          },
          // 递归函数的具体写法：
          diGuiTree(item) {
            item.forEach(item => {
              if (item.children === '' || item.children === undefined || item.children === null || item.children.length === 0) {
                delete item.children
              } else {
                this.diGuiTree(item.children)
              }
            })
          },
          // 取消按钮
          cancel() {
              this.$parent.$parent.matchFormOpen = false
          },
          /** 提交按钮 */
          submitForm: function() {
            this.$refs['form'].validate(valid => {
              if (valid) {
                this.loading = true
                savePcwDetailsMatch(this.form).then(response => {
                  if (response.code === 200) {
                      this.msgSuccess(this.$t('保存成功'))
                      this.$parent.$parent.closeOpen()
                  } else {
                      this.msgError(response.msg)
                  }
                  this.loading = false
                })
              } else {
                this.locationError(document)
              }
            })
         }

        }

    }
</script>
